import React, { useEffect } from 'react'
import { Link } from "react-router-dom"
import styles from "@/assets/styles/panel.module.less"
import { useSelector, useDispatch } from "react-redux"

export default function Panel() {
    const dispatch = useDispatch()
    const { menuRD: { menus } } = useSelector((state) => {
        return state
    })
    useEffect(() => {
        console.log(menus);
    }, [])

    const deleteMenu = (id) => {
        dispatch({
            type:"DELETEMENUS",
            payload:id
        })
    }
    return (
        <div className={styles.container}>
            <ul>
                {menus.map(item => {
                    return (
                        <li className={item.state?styles.active:null} key={item.id}>
                            <Link to={item.path}>{item.name}</Link>
                            <span style={{cursor:"pointer"}} onClick={() => deleteMenu(item.id)}>&nbsp;&nbsp;x</span>
                        </li>
                    )
                })}
            </ul>
        </div>
    )
}
